<template>
  <!-- 商品详情 -->
  <view>
    <c-navBar title="商品详情" isPerch></c-navBar>
    <!-- 轮播图 -->
    <u-swiper
		:autoplay="false"
      :list="goodData.swiperList"
      height="375"
      img-mode="aspectFit"
    ></u-swiper>

    <!-- 商品信息 -->
    <view class="info" v-if="goodData.sotLimit !== 1">
	<!-- 今日特价 -->
      <view class="df aic jcsb mb20 special-bg" v-if="goodData.sotSales===1">
        <view class="in-price" v-if="userType == 0" style="color:white"
          ><text>￥</text>{{ goodData.price }}</view
        >
        <view v-else style="display: flex; align-items: center">
          <view class="in-price" style="color:white"
            ><text>￥</text>{{ goodData.memberPrice }}</view
          >
          <view class="sh-old" style="color:white"><text>￥</text>{{ goodData.price }}</view>
        </view>
		<view>
			<!-- <view class="special-text"></view> -->
			<image :src="require('../static/specialText.png')" style="width:120rpx;height:30rpx;"/>
			<view class="in-sold">已售 {{ convertNumber(goodData.sellCount) }} 件</view>	
		</view>
        
      </view>
	  <!-- 普通价格 -->
	  <view class="df aic jcsb mb20" style="padding: 40rpx 32rpx 0 32rpx;" v-else>
		  <view class="in-price" v-if="userType == 0"
		    ><text>￥</text>{{ goodData.price }}</view
		  >
		  <view v-else style="display: flex; align-items: center">
		    <view class="in-price"
		      ><text>￥</text>{{ goodData.memberPrice }}</view
		    >
		    <view class="sh-old"><text>￥</text>{{ goodData.price }}</view>
		  </view>
		  <view class="in-sold">已售 {{ convertNumber(goodData.sellCount) }} 件</view>
	  </view>
      <view class="in-title">{{ goodData.title }}</view>
      <view v-if="goodData.flashSale" class="df aic jcsb mt20">
        <view class="in-sold">已售 {{ convertNumber(goodData.sellCount) }} 件</view>
        <view class="in-over">剩余：{{ goodData.stock }}件</view>
      </view>
    </view>
	
    <view class="pr clo-fff" v-if="goodData.sotLimit == 1">
      <image
        style="width: 800rpx; height: 160rpx"
        :src="require('../static/time1.png')"
        mode=""
      ></image>
      <view
        style="top: 0; left: 0; width: 750rpx; height: 150rpx; z-index: 2"
        class="pa bs"
      >
        <view style="padding: 0rpx 24rpx; padding-top: 0" class="bs dis_sb">
          <view>
            <view
              class="mb10"
              style="font-size: 40rpx; font-weight: 600; margin-bottom: 10rpx"
            >
              秒杀价￥<text style="font-size: 70rpx; letter-spacing: -4rpx">{{
                goodData.memberPrice
              }}</text>
            </view>
            <view
              class="df f24 aic"
              style="margin-top: -12rpx; font-size: 32rpx; letter-spacing: 2rpx"
            >
              <view
                class="p10 mr10 df aic jcc tac"
                style="
                  background-color: #fed6b3;
                  color: #ff0000;
                  height: 30rpx;
                  width: 320rpx;
                  border-radius: 10rpx;
                "
              >
                <view
                  style="
                    background-color: #ff0000;
                    width: 5rpx;
                    height: 5rpx;
                    border-radius: 10rpx;
                  "
                ></view>
                <view class="ml10 mr10">即将恢复￥{{ goodData.price }}</view>
                <view
                  style="
                    background-color: #ff0000;
                    width: 5rpx;
                    height: 5rpx;
                    border-radius: 10rpx;
                  "
                ></view>
              </view>
              <view style="color: #fed6b3">已售{{ goodData.sellCount }}件</view>
            </view>
          </view>

          <view>
            <view
              class="mb20 fwb"
              style="
                color: #912a01;
                letter-spacing: 2rpx;
                text-align: center;
                font-size: 30rpx;
              "
              >限时秒杀</view
            >
            <view>
              <u-count-down
                :time="timestamp"
                format="DD:HH:mm:ss"
                autoStart
                millisecond
                @change="onChange"
              >
                <view class="time">
                  <!-- <text class="time__item">{{ timeData.days }}&nbsp;天</text> -->
                  <text class="time__item"
                    >{{
                      timeData.hours > 10
                        ? timeData.hours
                        : "0" + timeData.hours
                    }}&nbsp;</text
                  ><text style="margin: 0 4rpx">&nbsp;:&nbsp;</text>
                  <text class="time__item"
                    >{{
                      (timeData.minutes < 10 ? "0" : "") + timeData.minutes
                    }}&nbsp;</text
                  >
                  <text style="margin: 0 4rpx">&nbsp;:&nbsp;</text>
                  <text class="time__item"
                    >{{
                      (timeData.seconds < 10 ? "0" : "") + timeData.seconds
                    }}&nbsp;</text
                  >
                </view>
              </u-count-down>
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          font-size: 32rpx;
          padding: 40rpx 32rpx 28rpx;
          font-weight: bold;
          color: #333333;
        "
        >{{ goodData.title }}</view
      >
    </view>

    <!-- 选择规格 -->
    <view class="check">
      <div class="ch-box" @click="speShow = true">
        <view class="df aic">
          <view class="ch-text">规格</view>
          <view class="df aic" v-if="skuForm.length > 0">
            <view class="ch-value" v-for="(v, i) in skuForm" :key="v.id"
              >{{ v.name }}
              <text v-if="i + 1 != skuForm.length">、</text>
            </view>
          </view>
          <view v-else>请选择型号、数量</view>
        </view>
        <image class="ch-img" src="@/static/common/go.png" mode=""></image>
      </div>
      <!-- 自提地点 -->
      <div v-if="goodData.business" class="ch-box" @click="pickUp = true">
        <view class="df aic">
          <view class="ch-text">自提点</view>
          <image
            class="ch-add"
            :src="require('../static/address.png')"
            mode=""
          ></image>
          <view class="ch-value">{{ goodData.business.name }}</view>
        </view>
        <image class="ch-img" src="@/static/common/go.png" mode=""></image>
      </div>
      <!-- 收货地址 -->
      <div v-else class="ch-box" @click="addressShow = true">
        <view class="df aic">
          <view class="ch-text">送至</view>
          <view class="ch-value otw">{{ addressFont }}</view>
        </view>
        <image class="ch-img" src="@/static/common/go.png" mode=""></image>
      </div>

      <!-- 参数 -->
      <div
        class="ch-box"
        @click="parameterShow = true"
        v-if="goodData.parameterList.length > 1"
      >
        <view class="df aic">
          <view class="ch-text">参数</view>
          <view class="ch-value otw">{{ parameterText }}</view>
        </view>
        <image class="ch-img" src="@/static/common/go.png" mode=""></image>
      </div>

      <div
        class="ch-box"
        @click="isShow = true"
        v-if="goodData.parameterLists.length > 1"
      >
        <view class="df aic">
          <view class="ch-text">保障</view>
          <view class="ch-value otw">{{ sellJsonText }}</view>
        </view>
        <image class="ch-img" src="@/static/common/go.png" mode=""></image>
      </div>
    </view>

    <view class="detail">
      <view class="goods_title">商品评价</view>
      <u-empty marginTop="50" text="暂无列表" :show="isEmpty" mode="list">
      </u-empty>
      <view class="p30" v-if="!isEmpty" style="padding-bottom: 0;">
        <view class="f34 mb20 dis_sb">
          <view> <text class="mr10">商品评价</text>({{ total }})</view>
          <view class="f26 clo-666" @click="scrolltolower"> 更多 > </view>
        </view>
        <view v-for="v in evaluateList" :key="v.id">
          <view class="df aic mb20">
            <image
              style="width: 60rpx; height: 60rpx; border-radius: 50%"
              :src="v.avatar"
            />
            <view style="margin-left: 10rpx" class="f32 fwb">{{ v.name }}</view>
          </view>
          <view class="mt20 clo-666 f24 cont2">{{ v.remark }}</view>
          <view class="mt20 mb20 df aic fww" >
            <!-- <view
              v-for="i in v.imgUrl"
              :key="i"
              style="
                width: 180rpx;
                height: 180rpx;
                border-radius: 10rpx;
                overflow: hidden;
              "
              class="mr10 mb10"
            >
              <image style="width: 100%" :src="i" mode="widthFix" />
            </view> -->
          </view>
        </view>
      </view>
      <div
        class="p30"
        v-if="buyerList.length > 0"
        style="border-top: 1rpx solid #e6e6e6"
      >
        <view class="dis_sb">
          <view class="f34">买家秀({{ buyerList.length }})</view>
          <image class="ch-img" src="@/static/common/go.png" mode=""></image>
        </view>
        <view style="display: flex">
          <view v-for="v in buyerList" :key="v.id" style="width: 200rpx">
            <view class="df aic">
              <view style="overflow: hidden">
                <view class="mt20 mb20" v-if="v.imgUrl.length > 0">
                  <view
                    style="
                      width: 180rpx;
                      height: 180rpx;
                      border-radius: 10rpx;
                      overflow: hidden;
                    "
                    class="mr10 mb10"
                  >
                    <image
                      style="width: 100%"
                      :src="v.imgUrl[0]"
                      mode="widthFix"
                    />
                  </view>
                </view>
                <view class="mt20 f24 cont1">{{ v.remark }}</view>
                <view class="df aic mb20">
                  <image
                    style="width: 40rpx; height: 40rpx; border-radius: 8rpx"
                    :src="v.avatar"
                  />
                  <view style="margin-left: 10rpx" class="f24 clo-666">{{
                    v.name
                  }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </div>
    </view>

    <!-- 详情介绍 -->
    <view class="detail">
      <view class="goods_title">详情介绍</view>
      <u-parse :content="goodData.content"></u-parse>
    </view>

    <!-- 底部占位 -->
    <view style="height: 220rpx"></view>
    <!-- 底部控件 -->
    <view class="control bs">
      <view class="dis_sb bs p10">
        <view class="co-left">
          <button
            open-type="contact"
            bindcontact="handleContact"
            class="btn-clear co-one"
            :send-message-title="goodData.title"
            :send-message-path="`/pages/goods/pages/goodsDetails?id=${goodData.id}`"
            :send-message-img="goodData.swiperList[0]"
            :show-message-card="true"
            :session-from="goodData.title"
          >
            <image :src="require('../static/service3.png')" mode=""></image>
            <view>客服</view>
          </button>
          <button class="btn-clear co-one" @click="toHome">
            <image :src="require('../static/control-op1.png')" mode=""></image>
            <view>首页</view>
          </button>
          <view class="co-one" @click="jumpCart">
            <view class="cart">
              <view v-if="cartNum" class="ca-num">{{ cartNum }}</view>
              <image :src="require('@/static/tabbar/cart.png')" mode=""></image>
            </view>
            <view>购物车</view>
          </view>
        </view>
        <view class="co-right bs">
          <view v-if="true" class="co-join" @click="joinCart">加入购物车</view>
          <view class="co-buy" @click="confirmBuy">立即购买</view>
        </view>
      </view>
    </view>

    <!-- 规格 -->
    <u-popup
      :show="speShow"
      mode="bottom"
      :closeable="true"
      round="10"
      @close="speShow = false"
    >
      <view class="sp-order">
        <image
          class="or-img"
          :src="skuCurren[0].cover || goodData.cover"
          mode=""
        ></image>
        <view class="or-right">
          <view class="or-price" v-if="userType == 0">
            <text>￥</text>{{ skuCurren[0].price || goodData.price }}
          </view>

          <view v-else style="display: flex; align-items: center">
            <view class="or-price">
              <text>￥</text
              >{{ skuCurren[0].memberPrice || goodData.memberPrice }}
            </view>
            <view class="sh-old">
              <text>￥</text>{{ skuCurren[0].price || goodData.price }}
            </view>
          </view>
          <!-- <view v-else-if="goodData.flashSale" class="or-price">
						<text>￥</text>{{skuCurren[0].flashSalePrice||goodData.flashSalePrice}}
					</view> -->
          <view class="or-title">{{ goodData.title }}</view>
        </view>
      </view>

      <view class="specification">
        <view class="sp-inner">
          <view class="sp-top"></view>
          <scroll-view
            :show-scrollbar="false"
            scroll-y
            style="
              width: 100%;
              height: 560rpx;
              padding-top: 28rpx;
              box-sizing: border-box;
            "
          >
            <view class="scrollList">
              <view class="sp-one" v-for="v in skuData" :key="v.unit">
                <view v-if="v.unit" class="sp-title">{{ v.unit }}</view>
                <view class="sp-box">
                  <view
                    v-for="(v2, i2) in v.arr"
                    :key="v2.id"
                    @click="handleSell(v2, v.arr)"
                  >
                    <view
                      v-if="v2.name"
                      class="sp-option"
                      :class="{ active: v2.active, prohibit: v2.prohibit }"
                    >
                      {{ v2.name }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="popup-bottom">
            <view class="sp-num">
              <view class="sp-title">购买数量</view>
              <u-number-box
                v-model="quantity"
                :min="1"
                @change="valChange"
              ></u-number-box>
            </view>
            <view v-if="!noStock" class="sp-btn" @click="confirmSell"
              >确定</view
            >
            <view v-else-if="noStock" class="sp-btn stock">缺货</view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 自提点 -->
    <u-popup
      :show="pickUp"
      mode="bottom"
      :closeable="true"
      round="10"
      @close="pickUp = false"
    >
      <view class="pick">
        <view class="pi-title">自提点</view>
        <view class="pi-main">
          <view class="pi-box">
            <view class="">
              <view class="df aic">
                <image
                  class="pi-icon"
                  :src="require('../static/pick-icon.png')"
                  mode=""
                ></image>
                <view class="pi-name">{{ goodData.business.name }}</view>
              </view>
              <view class="pi-font">{{ goodData.business.pickupPoint }}</view>
            </view>
            <view class="pi-feature">
              <image
                @click="openLocation"
                :src="require('../static/pick-op1.png')"
                mode=""
              ></image>
              <image
                @click="makePhone"
                :src="require('../static/pick-op2.png')"
                mode=""
              ></image>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 商品参数 -->
    <u-popup
      :show="parameterShow"
      :closeable="true"
      round="10"
      @close="parameterShow = false"
    >
      <view class="parameter">
        <view class="parameter_title"> 商品参数 </view>
        <scroll-view scroll-y>
          <view class="parameter_box">
            <view
              class="parameter_item"
              v-for="(item, index) in goodData.parameterList"
              :key="index"
            >
              <view class="item_key" v-if="item.key">
                {{ item.key }}
              </view>
              <view class="item_val" v-if="item.value">
                {{ item.value }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 保障 -->
    <u-popup
      :show="isShow"
      :closeable="true"
      round="10"
      @close="isShow = false"
    >
      <view class="guarantee bs">
        <view class="guarantee_title fwb tac f36"> 保障参数 </view>
        <scroll-view scroll-y style="max-height: 1000rpx; min-height: 600rpx">
          <view class="mt30" style="padding-bottom: 30rpx">
            <view v-for="(item, index) in goodData.parameterLists" :key="index">
              <view class="f30 fwb" v-if="item.key">
                {{ item.key }}
              </view>
              <view
                class="f24 mt10 clo-666 mb40"
                style="line-height: 45rpx"
                v-if="item.value"
              >
                {{ item.value }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <c-address
      ref="address"
      :show.sync="addressShow"
      @confirm="addConfirm"
      @close="addressShow = false"
    >
    </c-address>
    <ShareCanvasVue ref="shareCanvas" />
  </view>
</template>

<script>
import { init_frontendList } from "@/api/node.js";
import ShareCanvasVue from "./ShareCanvas/ShareCanvas.vue";
export default {
  components: {
    ShareCanvasVue,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      list: [],
      timeData: {},
      evaluateList: [],
      buyerList: [],
      speShow: false,
      addressShow: false,
      parameterShow: false,
      isEmpty: false,
      parameterText: "",
      sellJsonText: "",
      addressFont: "请选择收货地址",
      addressId: "", //地址id
      pickUp: false,
      isShow: false,
      value: 1,
      goodId: 0,
      goodData: {
        parameterList: [],
        parameterLists: [],
      },
      checkData: [],
      skuId: "",
      cover: "",
      skuForm: [],
      skuData: [],
      skuCurren: [],
      quantity: 1,
      cartNum: null,
      ensure: 0,
      noStock: false,
      isRoll: false,
      userType: 0,
      timestamp: null,
      total: null,
    };
  },
  onLoad(option) {
    this.goodId = option.id;

    this.getGoodsDetailFn();
    this.getCartNumFn();
    this.getData();
    this.getMembership();
    // this.getDefaultAdress();
  },
  onShow() {
    // this.getDefaultAdress();
    // this.$refs.address.getAddressListFn();
  },
  onReachBottom() {
    this.scrolltolower();
  },
  methods: {
	  // 销量取整
	  convertNumber(num) {
		  return num;
	      if (num === 0) {
	          return 0;
	      }
	      let magnitude = Math.floor(Math.log10(Math.abs(num)));
	      let highestDigit = Math.floor(Math.abs(num) / Math.pow(10, magnitude));
	      return highestDigit * Math.pow(10, magnitude) + '+';
	  },
    handleContact(e) {
      console.log(e.detail.path);
      console.log(e.detail.query);
    },
    // 获取默认地址
    getDefaultAdress() {
      this.$api.addressListY({}).then((res) => {
        console.log(res, "默认地址");
        this.addressFont = res.data.map((item) => {
          if (item.defaultValue == 1) {
            // console.log(item,"item");
            return item.province + item.city + item.area + item.address;
          }
        });
      });
    },

    onChange(e) {
      this.timeData = e;
    },

    async getData() {
      let arr = [];
      const params = {
        goodsId: this.goodId,
        pageNum: 1,
        pageSize: 2,
        //userId: uni.getStorageSync("user").userId,
      };
      const res = await init_frontendList(params);

      this.isEmpty = res?.list.length == 0;
      this.isRoll = res?.list.length == res?.total;
      this.total = res?.total;
      res?.list?.forEach((e) => {
        arr.push({
          ...e,
          imgUrl: e?.imgs?.split(","),
        });
      });
	  this.evaluateList.push(...arr);
	  this.getShowData()
	  
    },
	async getShowData() {
		let arr = [];
		const params = {
		  goodsId: this.goodId,
		  pageNum: 1,
		  pageSize: 2,
		  buyingHomeShow: 1
		};
		const res = await init_frontendList(params);
		res?.list?.forEach((e) => {
		  arr.push({
		    ...e,
		    imgUrl: e?.imgs?.split(","),
		  });
		});
		// this.evaluateList = arr;
		this.evaluateList.push(...arr);
		this.buyerList = arr.filter((v) => v?.buyingHomeShow == 1);
		console.log(
		  "this.buyerList,evaluateList :>> ",
		  this.buyerList,
		  this.evaluateList
		);
	},
    scrolltolower() {
		uni.navigateTo({
		  url: "/pages/goods/pages/evaluation?goodId="+this.goodId
		});
      console.log("到底了 :>> ", 1232);
      if (this.isRoll) return;
      this.pageSize = this.pageSize + 10;
      this.getData();
    },
    // 获取会员等级
    getMembership() {
      this.$api.getUserTypeY().then((res) => {
        // this.userType = res.data;
        this.userType = 1;
      });
    },

    // 获取商品详情
    async getGoodsDetailFn() {
      const { data } = await this.$api.getGoodsDetail({
        id: this.goodId,
      });

      if (data.sotLimit == 1) {
        let dateTmp = data.limitTime.replace(/-/g, "/");
        this.timestamp = Date.parse(dateTmp) - new Date();
      }

      this.goodData = data;
      // 商品参数
      if (data.parameter) {
        this.goodData.parameterList = JSON.parse(data.parameter);
        let arrs = [];
        this.goodData.parameterList.forEach((item) => {
          if (item.key) {
            arrs.push(item.key);
          }
        });
        this.parameterText = arrs.join("·");
      }
      if (data.guarantee) {
        this.goodData.parameterLists = JSON.parse(data.guarantee);
        let arrs = [];
        this.goodData.parameterLists.forEach((item) => {
          if (item.key) {
            arrs.push(item.key);
          }
        });
        this.sellJsonText = arrs.join("·");
      }

      if (data.content) {
        this.goodData.content = data.content;
      }
      if (data.itemImgs) {
        this.goodData.swiperList = data.itemImgs.split(",");
      }
      let unitArr = this.goodData.skuList[0].propertiesTitle
        .split(",")
        .map(function (v) {
          let obj = {
            unit: v.replace(/"/g, ""),
            // unit: v,
            allArr: [],
            arr: [],
          };
          return obj;
        });
      this.goodData.skuList.map((v, i) => {
        let sku = JSON.parse(v.skuJson);
        // sku = JSON.parse(sku)
        v.sku = sku;
        unitArr.forEach((v2, i2) => {
          if (Object.entries(sku)[i2][0] == v2.unit) {
            let obj = {};
            this.$set(obj, "id", i + i2 * this.goodData.skuList.length);
            this.$set(obj, "unit", Object.entries(sku)[i2][0]);
            this.$set(obj, "name", Object.entries(sku)[i2][1]);
            this.$set(obj, "old", sku);
            this.$set(obj, "prohibit", false);
            v2.allArr.push(obj);
            // return Object.entries(sku)[i2][1] == v2.name
          }
        });
        return v;
      });
      this.skuData = unitArr.map((v) => {
        const map = new Map();
        v.arr = v.allArr.filter((v) => !map.has(v.name) && map.set(v.name, v));
        // console.log('v', v);
        return v;
      });
    },
    // 点击规格
    handleSell(val, arr) {
      // 取消选中
      if (val.active) {
        val.active = false;
        this.skuData.map((v, i) => {
          v.arr.forEach((v2) => {
            this.$set(v2, "prohibit", false);
          });
        });
        this.skuCurren = [];
        this.noStock = false;
        return;
        // 不能选中
      } else if (val.prohibit) {
        return;
      }
      arr.forEach((v) => this.$set(v, "active", false));
      this.skuData.forEach((v, i) => {
        v.allArr.forEach((v2, i2) => {
          v2.prohibit = false;
        });
      });
      this.$set(val, "active", true);
      // 遍历出选中规格
      let skuArr = [];
      this.skuData.forEach((v, i) => {
        v.allArr.forEach((v2, i2) => {
          if (v2.active) {
            skuArr.push(v2);
          }
        });
      });
      // 提取出选中的规格
      this.skuCurren = this.goodData.skuList.filter((v) => {
        let res = skuArr.every((v2, i2) => {
          for (let key in v.sku) {
            if (key == v2.unit) {
              return v.sku[key] == v2.name;
            }
          }
        });
        if (res) {
          return v;
        }
      });
      if (this.skuCurren.length > 0) {
        this.noStock = false;
      } else {
        this.noStock = true;
      }
    },
    // 获取购物车数量
    async getCartNumFn() {
      const { data } = await this.$api.getCartNumY({
        id: this.goodId,
      });
      this.cartNum = data;
    },
    // 加入购物车
    async joinCart() {
      if (!this.skuId) {
        this.ensure = 2;
        this.speShow = true;
        return;
      }
      const { data, code } = await this.$api.updateCartNum({
        skuId: this.skuId,
        spuId: this.goodId,
        num: this.quantity,
        type: 1,
      });
      if (code == 200) {
        this.skuId = "";
        uni.showToast({
          icon: "success",
          title: "加入购物车成功",
        });
        this.getCartNumFn();
      }
    },
    // 确定规格
    confirmSell() {
      this.skuForm = [];
      this.skuData.forEach((v, i) => {
        v.allArr.forEach((v2, i2) => {
          if (v2.active) {
            this.skuForm.push(v2);
          }
        });
      });
      let sku = this.goodData.skuList.filter((v) => {
        let res = this.skuForm.every((v2, i2) => {
          for (let key in v.sku) {
            if (key == v2.unit) {
              return v.sku[key] == v2.name;
            } else {
            }
          }
        });
        if (res) {
          return v;
        }
      });
      if (!sku[0].id || sku.length != 1) {
        return uni.showToast({
          icon: "none",
          title: "选择规格有误,请重新选择",
        });
      }
      this.skuId = sku[0].id;
      if (this.ensure == 1) {
        this.confirmBuy();
      } else if (this.ensure == 2) {
        this.joinCart();
      }
      this.speShow = false;
    },
    // 确定购买
    confirmBuy() {
      if (!this.skuId) {
        this.ensure = 1;
        this.speShow = true;
        return;
      }
	  this.$api.payOrderInfoY({
	    type: 1,
	    quantity: this.quantity,
	    skuId: this.skuId,
	    spuId: this.goodId,
	    addressId: this.addressId,
	    couponId: '',
	    cartList: [],
	  }).then(res=>{
		  uni.navigateTo({
		    url:
		      "/pages/order/pages/confirmOrder?skuId=" +
		      this.skuId +
		      "&spuId=" +
		      this.goodId +
		      "&quantity=" +
		      this.quantity +
		      "&addressId=" +
		      this.addressId +
		      "&type=1",
		  });
	  })
	  .catch(err=>{
	  	console.log(err)
	  })
      
    },
    // 确定地址选择
    addConfirm(e) {
      if (e[0]?.id) {
        this.addressFont = e[0].province + e[0].city + e[0].area + e[0].address;
        this.addressId = e[0].id;
      }
      this.addressShow = false;
    },
    // 打开导航定位
    openLocation() {
      uni.openLocation({
        latitude: Number(this.goodData.business.latitude),
        longitude: Number(this.goodData.business.longitude),
        name: this.goodData.business.name,
        address: this.goodData.business.pickupPoint,
        success: function () {
          console.log("success");
        },
        fail(err) {
          console.log("err", err);
        },
      });
    },
    // 拨打电话
    makePhone() {
      uni.makePhoneCall({
        phoneNumber: this.goodData.business.phone,
      });
    },
    // 跳转到首页
    jumpHome() {
      uni.reLaunch({
        url: "/pages/tabbar/shop",
      });
    },
    // 跳转到购物车
    jumpCart() {
      uni.reLaunch({
        url: "/pages/tabbar/cart",
      });
    },
    // 跳转到购物车
    toHome() {
      uni.reLaunch({
        url: "/pages/tabbar/home",
      });
    },
    // 新增减少
    valChange(e) {
      console.log("e", e);
    },
    // 分享
    async onShareAppMessage(res) {
      try {
        uni.showLoading({ title: "分享信息生成中", mask: true });
        const imageUrl = await this.$refs.shareCanvas.setGoodsShareCanvas({
          ...this.goodData,
        }); // 用不同的画布画样式，就调对应的方法名，注意里面需要的参数要传对
        uni.hideLoading();
        return {
          title: this.goodData.title || "好物多多，快来选购啦～",
          path: `pages/goods/pages/goodsDetails?id=${this.goodData.id}`,
          imageUrl: imageUrl || "",
        };
      } catch (error) {
        uni.hideLoading();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.angle {
  width: 750rpx;
  padding: 24rpx 32rpx;

  .an-price {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
  }

  .an-text {
    font-size: 24rpx;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 10rpx 8rpx;
  }

  .an-img {
    width: 148rpx;
    height: 36rpx;
  }

  .an-old {
    font-size: 20rpx;
    font-weight: 400;
    color: #ffffff;
    text-decoration: line-through;
  }

  .an-time {
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;

    .c_down {
      margin-left: 12rpx;
    }
  }
}

.info {
  // padding: 40rpx 32rpx 28rpx;
  border-bottom: 8rpx #f6f6f6 solid;

  .in-price {
    font-weight: 800;
    color: #ee3b31;
    font-size: 48rpx;

    text {
      font-size: 24rpx;
    }
  }

  .sh-old {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    text-decoration: line-through;
    margin-left: 6rpx;
  }

  .in-title {
	padding: 0 32rpx 28rpx 32rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  .in-sold {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

  .in-over {
    font-size: 24rpx;
    color: #ff8326;
  }
}

.ch-box {
  padding: 28rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e6e6e6;
}
.ch-text {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  margin-right: 32rpx;
}

.ch-value {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;

  &.otw {
    width: 500rpx;
  }
}

.ch-img {
  width: 20rpx;
  height: 20rpx;
}

.ch-add {
  width: 20rpx;
  height: 24rpx;
  margin-right: 12rpx;
}

.detail {
  padding-top: 32rpx;
  .de-content {
    width: 750rpx;
    img {
      max-width: 750rpx !important;
    }
    image {
      max-width: 750rpx !important;
    }
  }
}

.control {
  height: 127rpx;
  width: 750rpx;
  position: fixed;
  bottom: 0rpx;
  background: #fff;
  padding-bottom: var(--iphonex-fix-bottom);
  --iphonex-fix-bottom: env(safe-area-inset-bottom);
  .co-left {
    width: 250rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .co-one {
      font-size: 20rpx;
      font-weight: 400;
      color: #666666;
      text-align: center;
      line-height: 30rpx;

      .cart {
        margin-right: 3rpx;
        position: relative;

        .ca-num {
          width: 20rpx;
          height: 20rpx;
          background: #fc3e3e;
          border-radius: 30rpx;
          position: absolute;
          right: 0;
          top: -8rpx;
          font-size: 16rpx;
          color: #ffffff;
          line-height: 20rpx;
          text-align: center;
        }
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 2rpx;
      }
    }
  }

  .co-right {
    flex: 1%;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
    display: flex;

    .co-join {
      flex: 1;
      background: #fef2f2;
      color: #ff2444;
      border-radius: 50rpx 0 0 50rpx;
    }

    .co-buy {
      flex: 1;
      color: #fff;
      background: #ff2444;
      border-radius: 0 50rpx 50rpx 0;
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

.sp-order {
  // height: 160rpx;
  display: flex;
  margin-bottom: 12rpx;
  position: absolute;
  // padding: 32rpx 0 0 32rpx;
  top: 32rpx;
  left: 32rpx;
  // z-index: 1;
  background: #fff;

  .or-img {
    width: 160rpx;
    height: 160rpx;
    margin-right: 36rpx;
    flex: none;
  }

  .or-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500rpx;
	margin-left: 20rpx;

    .or-price {
      font-size: 48rpx;
      font-weight: 800;
      color: #ee3b31;

      text {
        font-size: 24rpx;
      }
    }

    .sh-old {
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      text-decoration: line-through;
      margin-left: 6rpx;
    }

    .or-title {
      font-size: 32rpx;
      color: #333333;
    }
  }
}

.specification {
  padding: 32rpx 0 0 32rpx;
  height: 1000rpx;
  // max-height: calc(100vh - 160rpx);
  box-sizing: border-box;

  .sp-inner {
    height: 100%;
    overflow-y: scroll;
    width: 750rpx;
    box-sizing: border-box;
    position: relative;
  }

  .sp-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  .sp-top {
    padding-top: 150rpx;
  }

  .scrollList {
    height: 560rpx;
    padding-top: 28rpx;
    box-sizing: border-box;
    .sp-one {
      .sp-box {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1rpx solid #e6e6e6;
        padding-bottom: 28rpx;

        .sp-option {
          font-size: 24rpx;
          color: #666666;
          padding: 12rpx 24rpx;
          background: #f0f0f0;
          border-radius: 6rpx;
          display: inline-block;
          margin: 20rpx 20rpx 0 0;
          box-sizing: border-box;
          border: 1rpx solid #f0f0f0;

          &.active {
            background: #f2fff8;
            border: 1rpx solid #2ad03d;
            font-size: 24rpx;
            color: #2ad03d;
          }

          &.prohibit {
            background: #999;
            border: 1rpx solid #fff;
            font-size: 24rpx;
            color: #fff;
          }
        }
      }
    }
  }

  .popup-bottom {
    position: fixed;
    bottom: 0rpx;

    .sp-num {
      padding: 30rpx 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e6e6e6;
    }

    .sp-btn {
      width: 686rpx;
      height: 96rpx;
      background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
      border-radius: 16rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 94rpx;
      text-align: center;
      --iphonex-fix-bottom: env(safe-area-inset-bottom);
      margin: 22rpx 0 calc(20rpx + var(--iphonex-fix-bottom));

      &.stock {
        background: #999;
      }
    }
  }
}

.pick {
  padding: 40rpx 32rpx 0;
  min-height: 480rpx;

  .pi-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
    margin-left: 16rpx;
  }

  .pi-main {
    margin-top: 48rpx;

    .pi-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #e6e6e6;

      .pi-icon {
        width: 30rpx;
        height: 30rpx;
      }

      .pi-name {
        font-size: 32rpx;
        color: #333333;
        margin-left: 16rpx;
      }

      .pi-font {
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        margin-top: 10rpx;
        line-height: 36rpx;
      }

      .pi-feature {
        display: flex;
        align-items: center;

        image {
          width: 50rpx;
          height: 50rpx;

          &:nth-child(1) {
            margin-right: 30rpx;
          }
        }
      }
    }
  }
}

// 参数
.parameter {
  max-height: 1000rpx;
  min-height: 600rpx;
  width: 100%;
  padding: 40rpx 32rpx;
  box-sizing: border-box;

  .parameter_title {
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
  }

  .parameter_box {
    height: 1000rpx;
    margin-top: 30rpx;
  }

  .parameter_item {
    width: 100%;
    display: flex;
    align-items: center;
    height: 80rpx;

    .item_key {
      flex: 1;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .item_val {
      flex: 1;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }
  }
}
.guarantee {
  width: 100%;
  padding: 40rpx 32rpx;

  .guarantee_title {
    font-family: PingFang SC, PingFang SC;
    color: #1a1a1a;
  }
}

.time {
  @include flex;
  align-items: center;

  &__item {
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    background: red;
    font-weight: 1000;
    padding: 2rpx 4rpx;
  }
}
::v-deep image {
  margin: 0 !important;
}
.special-bg {
	height: 100%;
	padding: 16rpx 32rpx;
	background-image: url("../static/specialPrice.png");
	background-size: cover;
	background-repeat: no-repeat;
}
.special-text {
	background-image: url("../static/specialText.png");
	background-size: cover;
	background-repeat: no-repeat;
}
</style>
